<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { type Choice, useQuestionStore } from '@/stores/questions'

const route = useRoute()
const { getQuestionById } = useQuestionStore()
const selectedOption = ref('')
const questionTitle = ref(getQuestionById(Number(route.params.questionId))?.title)
const choiceList = ref<Choice[]>([])
watch(
  () => route.params.questionId,
  (newQuestionId) => {
    getQuestion(Number(newQuestionId))
  },
)

const getQuestion = (newQuestionId: number) => {
  console.log('获取问题')
  questionTitle.value = getQuestionById(Number(newQuestionId))?.title
  choiceList.value = getQuestionById(Number(newQuestionId))?.choiceList as Choice[]
}
// 用于跟踪是否选择了 "是" 或 "否"
const selectedButton = ref<'yes' | 'no' | ''>('')

const handleYes = () => {
  selectedButton.value = 'yes'
  console.log('选择了是')
}

const handleNo = () => {
  selectedButton.value = 'no'
  console.log('选择了否')
}

onMounted(() => {
  getQuestion(Number(route.params.questionId))
})
</script>

<template>
  <div class="question-container">
    <!-- 题目 -->
    <div class="question-title">
      <h2>{{ route.params.questionId }}. {{ questionTitle }}</h2>
    </div>

    <!-- 子选项 -->
    <div class="options-group">
      <label class="radio-option" v-for="(item, index) in choiceList" :key="item.id">
        <input type="radio" name="duration" :value="item.title" v-model="selectedOption" />
        {{ item.title }}
      </label>
    </div>

    <!-- 选项按钮 -->
    <div class="button-group">
      <button class="button" :class="{ selected: selectedButton === 'no' }" @click="handleNo">
        否
      </button>
      <button class="button" :class="{ selected: selectedButton === 'yes' }" @click="handleYes">
        是
      </button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.question-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 90%; /* 限制最大宽度 */
  margin: 0 auto; /* 居中 */
  padding: 20px;
  font-family: Arial, sans-serif;
}

.question-title {
  text-align: center;
  margin-bottom: 20px;

  h2 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    word-break: break-word; /* 防止文字超出 */
  }
}

.options-group {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: flex-start;
  margin-bottom: 20px;
  width: 100%; /* 占满容器宽度 */

  .radio-option {
    margin: 10px 0;
    font-size: 16px;
    color: #333;

    input {
      margin-right: 10px;
    }
  }
}

.button-group {
  display: flex;
  flex-direction: column; /* 垂直排列按钮 */
  gap: 10px; /* 按钮之间的间距 */
  width: 100%; /* 按钮宽度与容器对齐 */

  .button {
    width: 100%; /* 占满父容器 */
    height: 40px;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease; /* 添加平滑过渡效果 */
  }

  .no-button {
    background-color: #f4f4f4;
    color: #666;
  }

  .yes-button {
    background-color: #d0f8ea;
    color: #00bfa5;
  }

  .button.selected {
    background-color: #00bfa5; /* 选中时背景色 */
    color: #fff; /* 选中时字体颜色 */
    border: 2px solid #00a389; /* 添加选中边框 */
  }
}
</style>
